/* 
    基础的样式库 

    重置标签的默认样式，以及清除BootStrap的一些默认设置，达到各浏览器效果的统一
*/
/* BootStrap 会设置 a 标签焦点时有下划线，感觉不友好，这里给清除掉 */
a:focus,
a:hover {
  text-decoration: none;
}
ul {
  list-style: none;
  margin-bottom: 0;
}
/* 
    公共的样式库 

    这里不应该更改标签样式
*/
/*
    容器类  
    
    .c-*
*/
.c-scroll {
  overflow: auto;
}
.c-scroll-x {
  overflow-x: auto;
}
.c-scroll-y {
  overflow-y: auto;
}
/*
    表格类
*/
.table.table-data {
  border: 1px solid #cccccc;
}
.table.table-data th,
.table.table-data td {
  border: 1px solid #cccccc;
}
.table.table-data > thead > tr {
  background-color: #eeeeee;
}
.table.table-data > thead > tr > th {
  border-bottom: 1px solid #cccccc;
}
/* 取消BootStrap对表格的一些默认处理（我认为不好的） */
.tag-table > tbody + tbody {
  border-top: none;
}
/*
    .area

    用来表示一个区域，控制上下padding，margin，背景色等等

    通过设置一定的上下padding，再加上子元素 .container 的左右padding ，以达到一个比较友好的显示效果

    我设想的HTML结构应该是这样    .area > .container > .xxx

    - 如何扩展？
    .area-xxx 即可，xxx表示这一区块的含义，比如 .area-userinfo
*/
.area {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #fff;
}
/*
    .area-fluid

    推荐的HTML结构  .area-fluid > .container-fluid > .xxx

    仅仅有一个白色背景
*/
.area-fluid {
  background-color: #fff;
}
/*
    圆角Button
*/
.btn-round {
  border-radius: 2em;
}
.modal-full {
  position: absolute;
  width: 100%;
  padding: 0 20px;
}
